import React from 'react';
import {Flex, Icon,Badge,Tools,} from 'weaver-mobile';
import {inject, observer} from 'mobx-react';
import { Route, withRouter } from 'react-router-dom';
import parseInt from 'lodash/parseInt';
import { Browser,SearchAdvanced,RouteLayout,ListViewPage  } from 'weaver-mobile-page';
import {toJS} from 'mobx';
import Doc from '../doc/';
import Add from '../docForm/Add';
const getLabel = Tools.getLabel;
const AddButton = Add.addButton;

@inject('systemDocStore')
@withRouter
@observer
export default class CategoryMode extends React.Component {
  componentDidMount() {
    const {store, path} = this.props;
    store.initPath(path);
  }
  render() {
    const {store, path,systemDocStore} = this.props, 
          {categoryListViewPageStore, browser, addStore} = store,
          {searchAdvancedBasicStore,doSearchAdvance} = systemDocStore;
    let category = toJS(store.category);
    const barClsPre = 'system-doc-category-bar';
    return (
      <div style={{height: "100%"}}>
        <Route
          key="category-doc"
          path={`${path}/doc/:id`}
          render={() => {
            return (
              <RouteLayout>
                <div className="wm-route-layout" key="category-doc-div">
                  <Doc path={path}/>
                </div>
              </RouteLayout>
            );
          }}
        />
        <Flex className={barClsPre}>
          <div className={`${barClsPre}-topIcon`} onClick={() => category.id && this.props.history.go(-1)}><Icon type="return-01" size="xs" /></div>
          <div className={`${barClsPre}-treeIcon`}>
            <Browser
              label={getLabel(32452, '目录')}
              store={browser}
              hasAdvanceSerach
              type={'doccategory'}
              className={`${barClsPre}-browser`}
              dataParams={systemDocStore.tabKey==='all'?{noAllDirName:'1'}:{myCategoryTree:"1",noAllDirName:'1'}}
              onOk={(id,name) => {
                if(id !== category.sid){
                  window.setTimeout(()=>{
                    store.setChild({sid : id,sname : name});
                    this.props.history.push(path+"/"+id);
                  }, 0);
                }
              }}
            >
              <Icon type="branch" size="xs" />
              <span className={`${barClsPre}-treeLabel`}>{category.name}</span>
            </Browser>
            <Icon type="filter-o" size="xs" className={`${barClsPre}-filterIcon`} onClick={() => this.props.history.push(searchAdvancedBasicStore.path)}/>
            <SearchAdvanced
                store={searchAdvancedBasicStore}
                onSubmit={()=>{
                   doSearchAdvance();
                }}
              />
          </div>
        </Flex>
        <div className="wea-system-doc-category-scroll">
          <ListViewPage.Normal
            className="wea-system-doc-category"
            getDataCustom={true}
            store={categoryListViewPageStore} 
            onRowClick={(rowData) => {
              if(rowData.type === 'category') {
                store.setChild(rowData,store);
                this.props.history.push(path+"/"+rowData.sid);
              } else {
                store.setDocIsNew(rowData);
                this.props.history.push(`${path}/doc/${rowData.docid}`);
              }
            }}
            customHeight="100%"
            getTemplate={this.getTemplate}
            onEndReached={store.getNextPageWithCategory}
            onRefresh={store.refreshLoading}
          />
        </div>
        <Add store={addStore}/>
        <AddButton onClick={() => {
          const {history} = this.props;
          history.push(addStore.path);
        }}/>
      </div>
    );
  }
  getTemplate = (template) => {
    const {systemDocStore} = this.props, {tabKey} = systemDocStore;
    const itemClsPre = 'system-doc-list-row';
    const newTemp = {
      ...template,
      default: [{
        key: 'col_1',
        render: (rowData) => {
          if(rowData.type === 'category') {
            let noReadNum = parseInt(rowData.noReadNum);
            return (
              <div key={rowData.sid} className={itemClsPre}>
                <Icon type="folder" alt="" className={`${itemClsPre}-img`}/>
                <Badge text={noReadNum} overflowCount={99} />
                <div className={`${itemClsPre}-content`}>
                  <div className={`${itemClsPre}-title pt-md`}>{rowData.sname}</div>
                </div>
              </div>
            );
          } else {
            let isnew = parseInt(rowData.isnew);
            return (
              <div key={rowData.docid} className={itemClsPre}>
                {
                  rowData.icon.iconUrl ?
                    <img src={rowData.icon.iconUrl} alt="" className={`${itemClsPre}-img`}/>
                    :
                    <Icon type={`${rowData.icon.iconType}`} size="lg" className={`${itemClsPre}-img`} color={`${rowData.icon.iconColor}`}/>
          
                }
                {isnew ? <Badge dot/> : ''}
                <div className={`${itemClsPre}-content`}>
                  <div className={`${itemClsPre}-title`}>{rowData.docTitle}</div>
                  <div className={`${itemClsPre}-sub`}>
                    <span className={`${itemClsPre}-sub-username`}>{rowData.username}</span>
                    <span>{rowData.updateTime}</span>
                    {tabKey === 'my' && <span className={`${itemClsPre}-sub-right`}>{rowData.docstatus}</span>}
                  </div>
                </div>
              </div>
            );
          }
        },
      }],
    };
    return newTemp;
  }
}